<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>理想国真惠玩</title>
</head>
<body>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/css/uikit.min.css"/>

<div class="uk-h3">Slide</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: slide">
    <div>
        <a class="uk-inline" href="33.jpg" data-caption="Caption 1">
            <img src="33.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="22.jpg" data-caption="Caption 2">
            <img src="22.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="11.jpg" data-caption="Caption 3">
            <img src="11.jpg" alt="">
        </a>
    </div>
</div>

<div class="uk-h3">Fade</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: fade">
    <div>
        <a class="uk-inline" href="33.jpg" data-caption="Caption 1">
            <img src="33.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="22.jpg" data-caption="Caption 2">
            <img src="22.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="11.jpg" data-caption="Caption 3">
            <img src="11.jpg" alt="">
        </a>
    </div>
</div>

<div class="uk-h3">Scale</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: scale">
    <div>
        <a class="uk-inline" href="33.jpg" data-caption="Caption 1">
            <img src="33.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="22.jpg" data-caption="Caption 2">
            <img src="22.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="11.jpg" data-caption="Caption 3">
            <img src="11.jpg" alt="">
        </a>
    </div>
</div>

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit-icons.min.js"></script>
</body>
</html>